<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" title="我的订单" placeholder bgColor="transparent"></u-navbar>
    <view class="tabs-box">
      <view class="tabs-item" :class="{active: statusName == '1'}" @click="statusName='1'">待支付</view>
      <view class="tabs-item" :class="{active: statusName == '2'}" @click="statusName='2'">已支付</view>
      <view class="tabs-item" :class="{active: statusName == '3'}" @click="statusName='3'">已取消</view>
    </view>
    <view class="list" v-if="statusName=='1'">
      <view class="list-item" v-for="item in platformServiceOrderList" :key="item.id">
        <view class="item">
          <view class="info">
            <image src="https://gowork365.com/prod-api/profile/mini/company/list1.png" />
            <view>
              <view class="title u-line-2">{{ item.serviceMatters }}</view>
              <view class="time">{{ item.userName }} {{ item.phone }}</view>
              <view class="time">{{ item.createTime }}</view>
              <view class="num">￥{{ item.serviceFee }}元</view>
            </view>
          </view>
          <view class="actions">
            <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="getPayInfo(item.id)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action6.png" />
              <text>支付</text>
            </view>
            <view class="actions-item" style="background: #FFDFE5;color: #FE748B;" @click="handleRevoke(item.id)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action1.png" />
              <text>取消</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list" v-if="statusName=='2'">
      <view class="list-item" v-for="item in platformServiceOrderList" :key="item.id">
        <view class="item">
          <view class="info">
            <image src="https://gowork365.com/prod-api/profile/mini/company/list2.png" />
            <view>
              <view class="title u-line-2">{{ item.serviceMatters }}</view>
              <view class="time">{{ item.userName }} {{ item.phone }}</view>
              <view class="time">{{ item.createTime }}</view>
              <view class="num">￥{{ item.serviceFee }}元</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list" v-if="statusName=='3'">
      <view class="list-item" v-for="item in platformServiceOrderList" :key="item.id">
        <view class="item">
          <view class="info">
            <image src="https://gowork365.com/prod-api/profile/mini/company/list2.png" />
            <view>
              <view class="title u-line-2">{{ item.serviceMatters }}</view>
              <view class="time">{{ item.userName }} {{ item.phone }}</view>
              <view class="time">{{ item.createTime }}</view>
              <view class="num">￥{{ item.serviceFee }}元</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="platformServiceOrderList.length == 0" class="a-empty"><a-empty></a-empty></view>
	</view>
</template>

<script>
import { listPlatformServiceOrder, cancelOrderFn, platformServicePayOrder } from '@/api/index'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      statusName: '1',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      platformServiceOrderList: [],
    }
  },
  watch: {
    statusName() {
      this.search()
    }
  },
  onShow() {
    this.search()
  },
  methods: {
    getPayInfo(id) {
      const that = this
      uni.showLoading({ mask: true })
      const userInfo = uni.getStorageSync('userInfo')
      platformServicePayOrder({ id: id, userId: userInfo.userId, openId: userInfo.openId }).then(res => {
        uni.hideLoading()
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: function (res) {
            uni.showToast({
              icon: 'none',
              title: '支付成功'
            })
            that.search()
          },
          fail: function (err) {
            uni.showToast({
              icon: 'none',
              title: '支付失败'
            })
          }
        });
      })
    },
    getList() {
      uni.showLoading({ mask: true })
      listPlatformServiceOrder({...this.page, status: this.statusName}).then(response => {
        uni.hideLoading()
        this.platformServiceOrderList = [...this.platformServiceOrderList, ...response.rows];
        this.total = response.total;
      });
    },
    search() {
      this.page.pageNum = 1
      this.platformServiceOrderList = []
      this.getList()
    },
    handleRevoke(id) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '是否确认取消？',
        success: async function (res) {
          if (res.confirm) {
            await cancelOrderFn({id})
            uni.showToast({
              icon: 'none',
              title: '取消成功',
            })
            that.search();
          }
        }
      });
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .tabs-box {
    width: 686rpx;
    display: flex;
    gap: 14rpx;
    margin: 48rpx auto 38rpx;
    .tabs-item {
      width: 196rpx;
      height: 76rpx;
      line-height: 76rpx;
      border-radius: 38rpx;
      text-align: center;
      font-family: PingFang-SC, PingFang-SC;
      font-size: 24rpx;
      color: #FFFFFF;
    }
    .active {
      background: #FFFFFF;
      color: #138E88;
    }
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    .list-item {
      margin-bottom: 32rpx;
      .item {
        width: 686rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
        border-radius: 16rpx;
        padding: 48rpx 32rpx 40rpx;
        .info {
          margin-bottom: 48rpx;
          display: flex;
          gap: 24rpx;
          image {
            width: 104rpx;
            height: 104rpx;
            flex-shrink: 0;
          }
          .title {
            font-size: 28rpx;
            color: rgba(0,0,0,0.85);
            margin-bottom: 16rpx;
          }
          .time {
            font-size: 24rpx;
            color: rgba(0,0,0,0.25);
            margin-bottom: 4rpx;
          }
          .num {
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 32rpx;
            color: #F27723;
            margin-bottom: 8rpx;
          }
        }
        .actions {
          display: flex;
          gap: 24rpx;
          .actions-item {
            flex: 1;
            height: 76rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rpx;
            font-family: PingFangSC, PingFang SC;
            font-size: 24rpx;
            image {
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }
    }
  }
}
</style>
